<template>
  <div class="upload_div">
    <template v-if="image !== ''">
      <ul class="el-upload-list el-upload-list--picture-card el-upload-wrap">
        <li class="el-upload-list__item is-success">
          <img :src="image" class="el-upload-list__item-thumbnail">
          <a class="el-upload-list__item-name">
            <i class="el-icon-document" />
          </a>
          <label class="el-upload-list__item-status-label">
            <i class="el-icon-upload-success el-icon-check" />
          </label>
          <i class="el-icon-close" /><i class="el-icon-close-tip" />
          <span class="el-upload-list__item-actions">
            <span v-if="isdisupdate" class="el-upload-list__item-preview" @click="handleUpdatePreview()">
              <i class="el-icon-edit"></i>
            </span>
            <span v-if="isdispreview" class="el-upload-list__item-preview" @click="handlePreviewTop()">
              <i class="el-icon-zoom-in"></i>
            </span>
            <span v-if="isdisdelete" class="el-upload-list__item-delete" @click="clearimgUrl()"><i
                class="el-icon-delete" /></span>
          </span>
        </li>
      </ul>
    </template>
    <template v-else>
      <el-upload :action="action_url" :headers="header_url" accept=".jpg,.png,.JPG,.PNG" list-type="picture-card"
        :show-file-list="false" :before-upload="beforeAvatarUpload" :on-success="handlePictureCardPreview">
        <i class="el-icon-plus2 avatar-uploader-icon"><i class="el-icon-plus" /></i>
      </el-upload>
    </template>
    <template v-if="ImageOpen">
      <DialogImage :src="image"></DialogImage>
    </template>
    <template v-if="open">
      <userAvatar ref="imgAvatar" :src="image" @ImageSrc="ImageSrc"></userAvatar>
    </template>
  </div>
</template>

<script>
import userAvatar from "./userAvatar";
export default {
  props: {
    imgUrl: {
      type: String,
      default: ''
    },
    //update:禁用在线编辑功能
    //preview:禁用查看功能
    //delete:禁用删除功能
    // 禁用某些功能, 例如['update', 'preview', 'delete']
    isDisabled: {
      type: Array,
      default: () => []
    }
  },
  components: {
    userAvatar
  },
  data () {
    return {
      // image: this.imgUrl
      ImageOpen: false,
      open: false,
      isdisupdate: true,
      isdispreview: true,
      isdisdelete: true
    }
  },
  computed: {
    image: {
      get () {
        return this.imgUrl;
      },
      set (v) { }
    },
  },
  mounted () {
    this.isshow()
  },
  methods: {
    isshow () {
      for (let index = 0; index < this.isDisabled.length; index++) {
        const element = this.isDisabled[index];
        if (element === 'update') {
          this.isdisupdate = false
        } else if (element === 'preview') {
          this.isdispreview = false
        } else if (element === 'delete') {
          this.isdisdelete = false
        }
      }
    },
    ImageSrc (res) {
      this.image = res.data.url
      this.$emit('handleSuccess', { res: res })
    },
    handleUpdatePreview () {
      this.open = true
      this.$nextTick(() => {
        this.$refs.imgAvatar.modalOpened()
      })

    },
    handlePreviewTop () {
      this.ImageOpen = true
    },
    clearimgUrl () {
      this.$emit('clearimgUrl')
    },
    handlePictureCardPreview (res, file) {
      this.$emit('handleSuccess', { res: res, file: file })
    },
    beforeAvatarUpload (file) {
      const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      const whiteList = ["png", "jpg", "jpeg", "JPG", "PNG", "JPEG"]
      // const isLt2M = file.size / 1024 / 1024 < 5
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$message({
          message: '上传文件只能是 jpg,png格式',
          type: 'warning'
        })
        return false
      }
      // if (!isLt2M) {
      //   this.$message.error('上传图片大小不能超过 5MB!')
      //   return false
      // }
    },
  }
}
</script>

<style lang="scss">
.upload_div {
  height: 96px;
  width: 96px;
  overflow: hidden;
}

.upload_div .el-upload-list__item {
  width: 96px;
  height: 96px;
}

.upload_div .el-upload {
  width: 96px;
  height: 96px;
  line-height: 100px;
}

.el-upload-list__item-thumbnail {
  width: 100%;

}
</style>